<template>
	<div v-if="appStore.mobileMenuShow && !isDesktop" class="mobile-menu__wrapper">
		<app-tabs></app-tabs>
		<app-search class="mt-5 mx-[17px]"></app-search>
		<app-menu class="mt-1 px-[17px]"></app-menu>
	</div>
</template>

<script setup lang="ts">
import AppMenu from '@/components/app/app-menu/index.vue'
import AppSearch from '@/components/app/app-search/index.vue'
import AppTabs from '@/components/app/app-tabs/index.vue'
import { useAppStore } from '@/store'
import { isDesktop } from '@/hooks'
const appStore = useAppStore()
</script>
<style>
.mobile-menu__wrapper {
	position: fixed;
	background: var(--color-bg-1);
	top: 60px;
	bottom: 68px;
	left: 0;
	right: 0;
	z-index: 8;
	overflow-y: auto;
}
.mobile-menu__gap {
	padding-left: 17px;
	padding-right: 17px;
}
</style>
